<template>
	<view class="form-index">
		<u-navbar :border-bottom="false" :is-back="isBack" :title="navTitle" :custom-back="customBack"/>
		<u-subsection :animation="false" :list="list" :current="current" buttonColor="#7463EA" active-color="#fff"
					  inactive-color="#7463EA"
					  @change="sectionChange"/>
		<view>
			<TodoMy ref="TodoMy" @folder="onFolder" v-if="current === 0" :type="current" :title="navTitle" />
			<FilledMy ref="FilledMy" @folder="onFolder" v-if="current === 1" :type="current" :title="navTitle" />
			<FormMy ref="FormMy" @folder="onFolder" v-if="current === 2" :type="current"
					:title="navTitle"/>
			<FormMy ref="FormMy" @folder="onFolder" v-if="current === 3" :type="current"
					:title="navTitle"/>
		</view>
		<u-tabbar :list="vuex_tabbar" ></u-tabbar>
	</view>
</template>

<script>
import FormMy from './my/index.vue';
import FilledMy from "../completed/filled/index.vue";
import TodoMy from "../completed/todo/index.vue"

export default {
	components: {
		FormMy,
		FilledMy,
		TodoMy
	},
	onPullDownRefresh() {
		if (this.current === 1) {
			this.$refs.FormMy.onSearch();
		} else if(this.current === 0){
			this.$refs.TodoMy.onSearch();
		}else{
			this.$refs.FormMy.onSearch();
		}
	},
	data() {
		return {
			isBack: false,
			navTitle: '普通表单',
			list: [
				{
					name: "待填写",
				},
				{
					name: "已填写",
				},
				{
					name: '普通表单'
				},
				{
					name: '协作表单'
				}
			],
			current: 0
		}
	},
	methods: {
		sectionChange(index) {
			this.navTitle = this.list[index].name;
			this.current = index;
		},
		onFolder(e) {
			this.navTitle = e;
			this.isBack = true;
		},
		customBack() {
			this.isBack = false;
			this.navTitle = this.list[this.current].name;
			this.$refs.FormMy.onBack();
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
.form-index {
	padding: 27.17rpx;
}

::v-deep(.u-subsection) {
	height: 54.35rpx !important;
	border-radius: 18.12rpx !important;
	padding: 0 !important;
	background-color: #fff !important;

	.u-item-text {
		font-size: 25.36rpx !important;
	}

	.u-item-bg {
		height: 54.35rpx !important;
		border-radius: 18.12rpx !important;
		bottom: 0 !important;
		box-shadow: 0 7.25rpx 18.12rpx 1.81rpx rgba(0, 0, 0, 0.3);
		margin-left: -3px;
	}
}
</style>
